<template>
  <div class="dashboard">
    <a-card
      :bordered="false"
      style="border-radius: 8px; margin-bottom: 5px;"
      :bodyStyle="{ padding: '16px 20px 20px 25px' }"
    >
      <a-row type="flex" justify="space-between" :gutter="[12, 13]">
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="topheader">
            <div class="title">当前实时服务费（元）</div>
            <div class="price flex row_center col_center">
              ￥
              <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(info.is_serviceFee)" :duration="3000">
              </countTo>
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #1890ff;"></div>
              <div class="tips">今日实时销售额</div>
            </div>
            <div class="rightt">
              <span class="num">
                <countTo :startVal="startVal" :decimals="2" :endVal="parseFloat(info.is_alipayFee)" :duration="3000">
                </countTo>
              </span>
              元
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #fa8c16;"></div>
              <div class="tips">本月预估服务费</div>
            </div>
            <div class="rightt">
              <span class="num">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(info.month_preServiceFee)"
                  :duration="3000"
                >
                </countTo>
              </span>
              元
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #36cfc9;"></div>
              <div class="tips">本月结算服务费</div>
            </div>
            <div class="rightt">
              <span class="num">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(info.month_cmServiceFee)"
                  :duration="3000"
                >
                </countTo>
              </span>
              元
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #ff85c0;"></div>
              <div class="tips">上月预估服务费</div>
            </div>
            <div class="rightt">
              <span class="num">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(info.top_month_cmServiceFee)"
                  :duration="3000"
                >
                </countTo>
              </span>
              元
            </div>
          </div>
          <div class="infolist flex row_bet col_center">
            <div class="flex row_bet col_center">
              <div class="infoli" style="background-color: #389e0d;"></div>
              <div class="tips">上月结算服务费</div>
            </div>
            <div class="rightt">
              <span class="num">
                <countTo
                  :startVal="startVal"
                  :decimals="2"
                  :endVal="parseFloat(info.top_month_preServiceFee)"
                  :duration="3000"
                >
                </countTo>
              </span>
              元
            </div>
          </div>
        </a-col>
        <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="card_title" style="margin-bottom: 29px; font-size: 14px; margin-left: 40px;">本月服务费总览</div>
          <div>
            <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="[23, 23, 23, 60]">
              <v-tooltip/>
              <v-axis/>
              <v-legend position="top-right"/>
              <v-bar position="日期*数据" color="name" :adjust="adjust"/>
            </v-chart>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <a-row type="flex" justify="space-between" :gutter="[12, 13]">
      <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          style="border-radius: 8px; margin-bottom: 5px;"
          :bodyStyle="{ padding: '16px 20px 20px 25px' }"
        >
          <div class="card">
            <div class="card_title">小组排行</div>
            <div>
              <a-table
                :columns="columns"
                :rowKey="(item,index) => index"
                :dataSource="grounddata"
                :loading="loading"
                :pagination="false"
              >
                <div slot="index" slot-scope="text, row, index">
                  <span
                    class="index"
                    :style="{
                      backgroundColor: index < 3 ? '#314659' : '#f5f5f5',
                      color: index < 3 ? '#ffffff' : '#101010',
                    }"
                  >{{ index + 1 }}</span
                  >
                </div>
                <div slot="activity" slot-scope="text, row">
                  <a-button type="link" @click="godetail(row)">详情</a-button>
                </div>
              </a-table>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <div class="card">
          <div class="card_title">实时排行</div>
          <div style="text-align:center">
            <a-radio-group style="width:100%" v-model="sort" size="small" @change="radiochange">
              <a-radio-button value="1" style="width:30%;text-align:center">
                预估服务费
              </a-radio-button>
              <a-radio-button value="2" style="width:30%;text-align:center">
                销售额
              </a-radio-button>
              <a-radio-button value="3" style="width:30%;text-align:center">
                成交单数
              </a-radio-button>
            </a-radio-group>
          </div>
          <div class="realtime">
            <div class="realtitle flex row_around col_center">
              <span class="spans">排名</span>
              <span class="spans">姓名</span>
              <span class="spans">预估</span>
              <span class="spans">销售额</span>
              <span class="spans">订单数</span>
            </div>
            <div class="realli flex row_around col_center" v-for="(v, k) in realList" :key="k">
              <span class="spans">{{ k + 1 }}</span>
              <span class="spans">{{ v.user }}</span>
              <span class="spans">{{ v.is_serviceFee }}</span>
              <span class="spans">{{ v.is_alipayFee }}</span>
              <span class="spans">{{ v.is_goodsNum }}</span>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getSiteGroupData, getSiteMonthData, getWebGroupRank, getWebRealtimeRank } from '@/api/admin/dashboardApi'

  export default {
    name: 'Dashboard',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        sort: '1',
        data: [],
        scale: [
          {
            dataKey: 'time'
          }
        ],
        startVal: 0,
        height: 400,
        adjust: [
          {
            type: 'dodge',
            marginRatio: 1 / 50
          }
        ],
        loading: false,
        realList: [
          // {
          //   user: '从雪艳言', // 用户
          //   is_serviceFee: 1.77, // 预估服务费，，
          //   is_alipayFee: 17.73, // 销售额
          //   is_goodsNum: '10' // 成交单数
          // }
        ],
        columns: [
          {
            title: '排名',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '小组',
            align: 'center',
            dataIndex: 'group_name',
            scopedSlots: { customRender: 'group_name' }
          },
          {
            title: '昨日预估',
            align: 'center',
            dataIndex: 'preServiceFee',
            scopedSlots: { customRender: 'preServiceFee' }
          },
          {
            title: '小组人数',
            align: 'center',
            dataIndex: 'num',
            scopedSlots: { customRender: 'num' }
          },
          {
            title: '昨日人均',
            align: 'center',
            dataIndex: 'preServiceFee_avg',
            scopedSlots: { customRender: 'preServiceFee_avg' }
          },
          {
            title: '本月预估',
            align: 'center',
            dataIndex: 'month_preServiceFee',
            scopedSlots: { customRender: 'month_preServiceFee' }
          },
          {
            title: '本月人均',
            align: 'center',
            dataIndex: 'month_preServiceFee_avg',
            scopedSlots: { customRender: 'month_preServiceFee_avg' }
          },
          {
            title: '详情',
            align: 'center',
            dataIndex: 'activity',
            scopedSlots: { customRender: 'activity' }
          }
        ],
        grounddata: [
          // {
          //     teamName: '', // 团队名称
          //     group: '197',
          //     preServiceFee: '130.03', // 昨日预估
          //     month_preServiceFee: '4862.41', // 本月预估
          //     group_name: '从雪艳', // 组名
          //     num: 6, // 团队人数
          //     preServiceFee_avg: 21.67, // 昨日预估人均
          //     month_preServiceFee_avg: 810.4 // 本月人均
          // }
        ],
        info: {
          is_serviceFee: 0, // 实时预估服务费
          is_alipayFee: 0, // 实时订单支付金额
          month_cmServiceFee: 0, // 本月结算服务费
          month_preServiceFee: 0, // 本月预估服务费
          top_month_cmServiceFee: 0, // 上月预估服务费
          top_month_preServiceFee: 0 // 上月结算服务费
        }
      }
    },
    computed: {},
    created () {
      this.getSiteMonthData()
      this.getSiteGroupData()
      this.getWebGroupRank()
      this.getWebRealtimeRank()
    },
    mounted () {
    },
    methods: {
      radiochange (value) {
        this.sort = value.target.value
        console.log(this.sort)
        this.getWebRealtimeRank()
      },
      getWebRealtimeRank () {
        getWebRealtimeRank({
          sort: this.sort
        })
          .then((res) => {
            console.log('实时榜单', res)
            this.realList = res.data.data
          })
          .catch((err) => {
            console.log(err)
          })
      },
      getWebGroupRank () {
        getWebGroupRank()
          .then((res) => {
            console.log('小组数据', res)
            this.grounddata = res.data
          })
          .catch((err) => {
            console.log(err)
          })
      },
      // 数组提取
      getArrayKey (array, key, isparse) {
        var resc = []
        if (array) {
          for (let i = 0; i < array.length; i++) {
            if (isparse) {
              resc.push(Number(array[i][key])) // 是否转类型
            } else {
              resc.push(array[i][key])
            }
          }
        }
        // 使用: this.getArrayKey(array, "key");
        return resc
      },
      getSiteMonthData () {
        getSiteMonthData()
          .then((res) => {
            console.log(res)
            this.info.month_preServiceFee = res.data.info.month_preServiceFee
            this.info.month_cmServiceFee = res.data.info.month_cmServiceFee
            this.info.top_month_cmServiceFee = res.data.info.top_month_cmServiceFee
            this.info.top_month_preServiceFee = res.data.info.top_month_preServiceFee

            const time = this.getArrayKey(res.data.month, 'addDate')
            // console.log(time)
            // bar 使用不了 - 和 / 所以替换下
            for (const i in time) {
              time[i] = moment(time[i]).format('MM_DD')
            }
            // console.log(time)
            time.reverse()
            const preServiceFee = this.getArrayKey(res.data.month, 'preServiceFee', true) // 预估
            preServiceFee.reverse()
            const cmServiceFee = this.getArrayKey(res.data.month, 'cmServiceFee', true)
            cmServiceFee.reverse()
            const Name = ['预估服务费', '结算服务费']
            const arr = []
            const obj = {}
            const obj2 = {}
            for (let i = 0; i < preServiceFee.length; i++) {
              obj.name = Name[0]
              const key = time[i]
              obj[key] = preServiceFee[i]
              // console.log('obj', obj)
            }
            arr.push(obj)
            for (let i = 0; i < cmServiceFee.length; i++) {
              obj2.name = Name[1]
              const key = time[i]
              obj2[key] = cmServiceFee[i]
              // console.log('obj', obj)
            }
            arr.push(obj2)
            // console.log('arr', arr)
            const DataSet = require('@antv/data-set')
            const dv = new DataSet.View().source(arr)
            dv.transform({
              type: 'fold',
              fields: time,
              key: '日期',
              value: '数据'
            })
            this.data = dv.rows
            // console.log('this.data', this.data)
          })
          .catch((err) => {
            console.log(err)
          })
      },
      getSiteGroupData () {
        getSiteGroupData()
          .then((res) => {
            console.log(res)
            this.info.is_serviceFee = res.data.is_serviceFee
            this.info.is_alipayFee = res.data.is_alipayFee
          })
          .catch((err) => {
            console.log(err)
          })
      },
      godetail () {
        // this.$router.push({
        //   url:""
        // })
      }
    }
  }
</script>
<style lang="less" scoped>
  .dashboard {
    p {
      margin: 0;
    }

    .topheader {
      width: 100%;
      height: 100px;
      background-color: #1890ff;
      border-radius: 6px;
      box-shadow: 0px 2px 6px 0px rgb(64, 169, 255);
      text-align: center;
      padding: 14px;

      .title {
        font-size: 14px;
        color: #fbfbfb;
        text-align: left;
      }

      .price {
        text-align: left;
        font-size: 36px;
        color: #fbfbfb;
      }
    }

    .infolist {
      margin-top: 18px;
      height: 29px;

      .infoli {
        width: 8px;
        height: 28px;
        border-radius: 2px;
        margin-right: 14px;
      }

      .tips {
        color: #404040;
        font-size: 14px;
      }

      .num {
        color: #404040;
        font-size: 25px;
        font-weight: 600;
      }

      .rightt {
        display: table-cell;
        vertical: bottom;
      }
    }

    .card {
      padding: 15px;

      .realtime {
        width: 100%;

        .realtitle {
          color: #101010;
          border-radius: 3px;
          font-size: 14px;
          background-color: #f5f5f5;
          border: 1px solid rgba(217, 217, 217, 100);
          margin-top: 14px;

          .spans {
            width: 20%;
            text-align: center;
          }
        }
      }

      .realli {
        border: 1px solid rgba(217, 217, 217, 100);
        border-top: none;
      }
    }

    .card_title {
      margin-bottom: 14px;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }
  }
</style>
